<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/style.min.css">
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="goods-details-pg" class="goods-details-pg cl">
        <header class="cl" v-show="header.show">
            <div class="nav-bar cl">
                <span class="goback"></span>
                <span class="collapse-ico"></span>
                <span class="store-name">A梦会员店</span>
            </div>
        </header>
        <div class="main cl">
            <div class="nav-wrap">
                <ul class="nav-tabs cl">
                    <li class="active"><a href="#">商品</a></li>
                    <li><a href="#">详情</a></li>
                    <li><a href="#">参数</a></li>
                </ul>
            </div>
            <div class="parms-wrap">
                <table>
                 <colgroup>
                 	<col width="30%">
                 	<col width= 70%>
                 </colgroup>
                    <thead>
                        <tr>
                            <th colspan="2">参数分类</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>品牌</td>
                            <td>Haier/海尔</td>
                        </tr>
                        <tr>
                            <td>商品名称商品名称商品名称商品名称</td>
                            <td>海尔洗及机ABC3213/551</td>
                        </tr>
                        <tr>
                            <td>控温方式</td>
                            <td>电脑控温</td>
                        </tr>
                    </tbody>
                </table>
                 <table>
                 <colgroup>
                 	<col width="30%">
                 	<col width= 70%>
                 </colgroup>
                    <thead>
                        <tr>
                            <th colspan="2">参数分类</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>品牌</td>
                            <td>Haier/海尔</td>
                        </tr>
                        <tr>
                            <td>商品名称商品名称商品名称商品名称</td>
                            <td>海尔洗及机ABC3213/551</td>
                        </tr>
                        <tr>
                            <td>控温方式</td>
                            <td>电脑控温</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="btm-cart">
            <div class="favorite">
                <h4>立即关注</h4></div>
            <div class="cart">
                <h4>购物车</h4><span>18</span></div>
            <div class="btn-buy">
                <h3>立即购买</h3></div>
            <div class="add-cart">
                <h3>加入购物车</h3></div>
        </div>
    </div>
    <template id="props-row">
        <div class="props-row">
            <p v-for="(item,i) in items">
                <label :class={lablecl:item.labelcl}>{{item.lbl}}</label><span v-for="(prop,j) in item.props" @click="selectfn(i,j)">{{prop}}</span></p>
        </div>
    </template>
    <template id="spinner">
        <p class="goods-spinner">
            <label>数量：</label>
            <button type="button" class="first" @click="cut">-</button>
            <input type="text" v-model="num">
            <button type="button" class="last" @click="add">+</button><span class="warning" v-show="warning">数量不能小于1！</span>
        </p>
    </template>
    <script src="lib/vue.js"></script>
    <script src="./bundle.js"></script>
    <script>
    Vue.component("props-row", {
        template: "#props-row",
        data: function() {
            return {
                items: [{
                    lbl: "已选：",
                    props: [],
                    labelcl: true
                }, {
                    lbl: "颜色：",
                    props: ['金色', '银色', '黄色', '黑色']
                }, {
                    lbl: "功能：",
                    props: ['全自动', '半自动']
                }]
            }
        },
        methods: {
            selectfn: function(a, b) {
                console.log(a);
                console.log(b);
            }
        }
    });
    Vue.component("spinner", {
        template: "#spinner",
        data: function() {
            return {
                num: 1,
                warning: false
            }
        },
        methods: {
            cut: function() {
                if (this.num > 1) {
                    this.num--
                } else {
                    this.warning = true;
                }
            },
            add: function() {
                this.num++;
                this.warning = false;
            }
        }
    })
    var app = new Vue({
        el: "#goods-details-pg",
        data: {
			header:{
				show: !APP.iswechat()
			},
            stockflag: true,
            stock: "有货",
            goodslist: [{
                imgurl: 'http://dummyimage.com/100X150/ddd/ccc',
                title: 'XQB100-AJ1598ASE10公斤全自动波轮洗衣机 半自动洗衣机',
                price: '1238.00'
            }, {
                imgurl: 'http://dummyimage.com/100X150/ddd/ccc',
                title: 'XQB100-AJ1598ASE10公斤全自动波轮洗衣机 半自动洗衣机',
                price: '1238.00'
            }, {
                imgurl: 'http://dummyimage.com/100X150/ddd/ccc',
                title: 'XQB100-AJ1598ASE10公斤全自动波轮洗衣机 半自动洗衣机',
                price: '1238.00'
            }, {
                imgurl: 'http://dummyimage.com/100X150/ddd/ccc',
                title: 'XQB100-AJ1598ASE10公斤全自动波轮洗衣机  半自动洗衣机',
                price: '1238.00'
            }]
        },
        methods: {

        }
    })
    </script>
</body>

</html>
